<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta name=Keywords content="<%= htmlWebpackPlugin.options.keywords %>">
  <meta name=Description content="<%= htmlWebpackPlugin.options.description %>">
  <link rel="shortcut icon" href="//www.artup.com/img/logoMin.ico" type="images/x-icon" />
</head>

<body style="opacity:0;">
<div id="app">
  <unify-header></unify-header>
  <suspension class="suspend" ref="suspend" :show-height="showSuspensionHeight" @mouseleave="suspendPackUp">
    <div class="container">
      <div class="upper">
        <div class="wrapper">
          <label class="suspend-label">小时光</label>
          <label class="customization-item current"
                 @mouseover="suspendPullDown"
                 @click="suspendPullDown">颜色：{{showIs?'未选择':nowColor.name}}</label>
          <label class="suspend-label">尺寸：170x235mm</label>
          <label class="suspend-label">页数：24页</label>
          <button class="customization-btn" @click="startCustom">开始定制</button>
        </div>
      </div>
      <div class="under">
        <div class="wrapper" style="padding-left:338px;">
          <div class="suspend-color-item"
               v-for="(item,index) in frameColor"
               :class="{active:!showIs&&nowColor.code===item.code}"
               :style="{background:item.attr}"
               @click="checkColor(index)&&suspendPackUp()">
            <label>{{item.name}}</label>
          </div>
        </div>
      </div>
    </div>
  </suspension>
  <div class="banner_nav">
    <div class="view_banner">
      <div v-if="showIs" class="left_view"></div>
      <div v-if="!showIs" class="left_view2">
        <img :src="picturePrefix+oSrcImg">
      </div>
      <div class="right_view">
        <span class="title">拾光集</span>
        <p class="text_p">拾起流逝时光, 甄选记忆中的宝藏</p>
        <p class="text_p">将随手拍的多彩瞬间定制成集，珍藏生活每一刻</p>
        <div class="view_color">
          <span>颜色</span>
          <ul>
            <li class="color_div" @click="checkColor(index1)"
                v-for="(item,index1) in frameColor"
                :color="item.code"
                :name="item.name">
              <div :class="{'lines':!showIs&&index1==lineIndex}" class="color_div"
                   :style="{'background':item.attr}"></div>
              <span :class="{'span_c':nowSize.code===item.code}" class="span_color">{{item.name}}</span>
            </li>
          </ul>
        </div>
        <div class="view_box">
          <div class="view_size">
            <span>尺寸</span>
            <p>170x235mm</p>
          </div>
          <div class="view_page">
            <span>页数</span>
            <p>24页</p>
          </div>
        </div>
        <span class="price">89 RMB</span>
        <a class="a_href" @click="startCustom" href="javascript:void(0)">开始定制</a>
      </div>
    </div>
  </div>
  <div class="heji_bg1 hejicenter" ref="showSuspensionFlag">
    <div class="content">
      <div class="cont_rg">
        <strong>MARVELLOUS</strong>
        <p>随时随地捕捉生活精彩瞬间</p>
        <p>定制专属于你的多彩拾光集</p>
      </div>
    </div>
  </div>
  <div class="heji_bg2 hejicenter">
    <div class="content">
      <div class="cont_lf">
        <strong>BE YOURSELF</strong>
        <p>一场说走就走的旅行</p>
        <p>认识世界的方式一直都在路上</p>
      </div>
    </div>
  </div>
  <div class="heji_bg3 hejicenter">
    <div class="content">
      <div class="cont_rg">
        <strong>DESIGN</strong>
        <p>你也可以是设计师</p>
        <p>尽情发挥你的想象力</p>
      </div>
    </div>
  </div>
  <div class="heji_bg4 hejicenter">
    <div class="content">
      <div class="cont_lf">
        <strong>QUALITY</strong>
        <p>图像清晰 色彩真实</p>
      </div>
      <div class="cont_foot">
        <span>采用全球专业数码输出设备 层次清晰 色彩艳丽 百年不褪色</span>
      </div>
    </div>
  </div>
  <unify-footer></unify-footer>
</div>
</body>

</html>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113376322-1"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())

  gtag('config', 'UA-113376322-1')
</script>
